<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Autorizar Pontos</title>

	<style type="text/css">
		body{font-family: Verdana; margin: 0}
		#fsup {position: absolute; left: 5px; background-color: #000000; height: 23px; filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7; overflow: hidden; }
		#fsup h4{color: #ffffff; font-size: 12px; text-align: center; font-weight: bold; margin-top: 3px;}
		#map{top: 0px; left: 0px; }
		
		#menu{font-size: 10px; margin-left: 0px; color: #ffffff; position: absolute; width: 160px; padding: 0px; border: 0px; background-color:#000000; filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;}
		#menu a{color:#ffffff; font-size: 10px}
				
		#menu h2{font-size: 10px; font-weigth: bold; margin-bottom: 1px; margin-left: 3px; margin-right: 3px;}
		#menu p{margin-top: 0px; margin-bottom: 0px; margin-left: 3px; margin-right: 3px;}
		
		#carregando{text-align: center; font-size: 12px; font-weight: bold; width: 220px; height: 100px; position: absolute; background-color: #ffffff; border: 2px solid #000000}
		#carregando img{border: 0; text-align: center; margin-top: 6px}
		
		.fechar{ position: absolute; left: 380px; top: 2px}
		.fechar img{border:0}
	</style>
	
	<script src="/pontos/javascript/jquery-1.3.js" type="text/javascript"></script>
	<script src="/pontos/javascript/jquery.json-1.3.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		var marcadores=[];
		var icones=[];
		var map;
		var retcategorias=[]
		function carregaIcones()
		{
			$.get("/app/json",{acao: "categorias"}, function(data){
			
				var retorno = $.evalJSON(data);
				categorias = retorno["categorias"];
				
				
				for(i=0; i<categorias.length; i++)
				{		
					var item = categorias[i];
					var id = item.id;
					icones[id] = new GIcon(G_DEFAULT_ICON,"/pontos/images/marker/" + item.icone);
					retcategorias[id] = item.categoria;
				}
				
				carregaPontosValidacao();
			});
		}
	
		function carregaPontosValidacao()
		{
			var manager = new GMarkerManager(map,{borderPadding: 50, maxZoom:15 ,trackMarkers:true});
			map.clearOverlays();
			marcadores=[];
			
			$.get("json?acao=pontos&uf={{ uf }}&pid={{ pid }}",function(data){
			
				var retorno = $.evalJSON(data);
				var dados = retorno["pontos"];
				var menu = document.getElementById("menu");
				
				var precisaEsconderLoad=false;
				if(menu.innerHTML!=null && menu.innerHTML!="") precisaEsconderLoad=true;
				
				menu.innerHTML="";
				
				if(dados!=undefined){
					for(i=0; i<dados.length; i++)
					{
						var pontoAtual = dados[i];
						var html = new Array();
						
						html.push("	<h2><a href='javascript:move(" + pontoAtual["id"]+");'>" + pontoAtual["nome"] + "</a></h2>");
						html.push("	<p>" + retcategorias[pontoAtual["id_categoria"]] + " @ " + pontoAtual["uf"] + "</p>");
						
						menu.innerHTML+=html.join("");
						
						var m = criarMarker( pontoAtual["nome"],
																	pontoAtual["latitude"], 
																	pontoAtual["longitude"], 
																	pontoAtual["id"],
																	icones[pontoAtual["id_categoria"]]);
						// carrega marker para o array
						marcadores[pontoAtual["id"]]=[];
						marcadores[pontoAtual["id"]]["marca"] = m;
						marcadores[pontoAtual["id"]]["status"]="";
										
						map.addOverlay(marcadores[pontoAtual["id"]]["marca"]);
						//manager.addMarker(marcadores[pontoAtual["id"]], 1);
						
					}
					
					manager.refresh();
					
				}
				
				if(precisaEsconderLoad)
					$("#carregando").hide();
				
			
			});
		}
		
		function criarMarker(a,b,c,y,z)
		{
			var _m = new GMarker(new GLatLng(parseFloat(b), parseFloat(c)), {icon: z, draggable: true, bouncy: true});
			
			GEvent.addListener(_m,"click", function(){
				
				var msg="";
				var p = _m.getLatLng();
				
				msg+="<b>"+a+"</b>";
				msg+="<br>Latitude: <b>"+p.lat()+"</b>";
				msg+="<br>Longitude: <b>"+p.lng()+"</b>";
				msg+="<br><br><input type='radio' value='"+y+"' id='_aprova' onclick='marcadores[this.value][\"status\"]=\"A\";' name='_act'>Aprova - <input type='radio' value='"+y+"' onclick='marcadores[this.value][\"status\"]=\"X\";' id='_reprova' name='_act'>Rejeita";
				msg+="<br><a href='javascript:executa("+y+")'>Executar imediato</a>&nbsp;&nbsp;<a href='javascript:fila("+y+")'>Enfileirar</a>";
				
				
				_m.openInfoWindowHtml(msg)
			
			});
			
			return _m;
	
		}
		
		var altura, largura;
		
		function ajustaPosicoes()
		{
			altura=document.documentElement.clientHeight-10;	
			largura=document.documentElement.clientWidth-10;
			
			$("#map").css({width:largura, height: altura, top: 0, left: 5});
			$("#menu").css({left: largura-160, top: 25, height: altura-30});
			$("#fsup").css({width: largura, top: 0});
			$("#carregando").css({top: (altura/2)-50, left: (largura/2)-110});
		}
		
		function init()
		{
		
			ajustaPosicoes();
			
			$(window).bind("load",function(){
				$("#carregando").hide();
			});
		
			$("#map").show()
			$("#fsup").show();

			map = new GMap2(document.getElementById("map"));
			map.addControl(new GLargeMapControl());
			
			
			if(google.loader.ClientLocation)
				map.setCenter(new GLatLng(google.loader.ClientLocation.latitude,google.loader.ClientLocation.longitude),12);
			else 
				map.setCenter(new GLatLng(-23.548943,-46.638818),15);		
				
			// carrega icones, pra depois carregar pontos
			carregaIcones();
		}
		
		function move(id)
		{	
			map.setCenter(marcadores[id]["marca"].getLatLng(), 15);
			GEvent.trigger( marcadores[id]["marca"], "click");
		}
		
		function executa(id)
		{
			
			$("#carregando").show();
			
			var marca = marcadores[id]["marca"];
			var p = marca.getLatLng();
			
			var lista=[];
			var opts={id: id, lat: p.lat(), lng: p.lng(), status: marcadores[id]["status"]};
			lista[0]=opts;
			
			$.post("json",{acao: "atualiza", pontos: $.toJSON(lista)},function(data){
				var retorno = $.evalJSON(data);
				
				if(retorno["status"]=="ok")
					carregaPontosValidacao();
				else
					alert("Não foi possível gravar");
			});
		}
		
		function fila(obj)
		{
		}
	
	</script>
	
	
  </head>
  <body onunload="GUnload()">

	<div id="map" style="display:none">
		Carregando ...
	</div>
	
	<div id="fsup" style="display:none">
		<h4>TRACKSOURCE - Autorizar/Rejeitar Pontos</h4>
	</div>
	
	<div id="menu"></div>
	
	<div id="carregando">
		<p>Carregando.. aguarde</p>
		<img src="/pontos/images/marker/marca_carregando.gif" alt="Carregando..">
	</div>
	
	
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAJ6jCsRRSkhnks9lFbN676BSUExiqcSYg9ixas7s4TaQbDx70sxQXKgMRctwmMJXZOyDwq1XmBL7FpA" type="text/javascript"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAJ6jCsRRSkhnks9lFbN676BSUExiqcSYg9ixas7s4TaQbDx70sxQXKgMRctwmMJXZOyDwq1XmBL7FpA"></script>
	<script type="text/javascript">
		init();
	</script>
	
  </body>

</html>